<!--
1. Vue中提供了v-on 事件绑定机制
2. v-on: 可以缩写为@

-->

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{msg}}</p>
    <button @click="show">按钮</button>
</div>

<script>
    var vm = new Vue({
        el: '#app',  // 表示当前Vue实例要控制页面上那个区域,这里指的是 id为app的div
        data: {  // data 属性中存放的是el中要用到的数据
            msg: '欢迎学习Vue',  // 通过Vue 提供的指令{{插值表达式}}，就能很方便的把数据渲染到页面上，不用手动操作DOM元素了。
            zmj: '不要停在我上面'
        },
        methods:{  // 这个methods属性中定义了当前Vue实例中所有可用方法
            show() {
                alert("Hello job!");
            }
        }
    })
</script>
</body>
</html>